目录

  1. Mixin
    1. 理解
    2. 什么时候合并
    3. 怎么合并
      1. 权重
        1. 1、函数合并叠加
        2. 2、数组叠加
        3. 3、原型叠加
    4. 使用

转：
【Vue原理】Mixin - 白话版
Vue 中mixin 的用法详解

Mixin

理解

　　说下我对vue中mixin的一点理解
　　vue中提供了一种混合机制–mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？
　　组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。
　　而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

1
2
3
4
单纯组件引用：
　　父组件 + 子组件 >>> 父组件 + 子组件
mixins：
　　父组件 + 子组件 >>> new父组件

　　作用：多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

什么时候合并

　　什么是全局选项？ 就是 全局组件，全局过滤器，全局指令，全局mixin

1
2
3
4
1、Vue.component 注册的 【全局组件】
2、Vue.filter 注册的 【全局过滤器】
3、Vue.directive 注册的 【全局指令】
4、Vue.mixin 注册的 【全局mixin】

　　也就是说，你全局注册的选项，其实会被传递引用到你的每个组件中，这样，全局选项 和 组件选项 就会合并起来，之后组件便能访问到全局选项，然后你就可以在组件内使用全局注册的选项，比如使用 全局过滤器
　　其实就是像你在 自己的组件声明 components 一样，只是全局注册的话，Vue 背后偷偷给你的每个组件 都合并多一个全局选项的引用
　　但是为了保证全局选项不被污染，又不可能每个组件都深度克隆一份全局选项导致开销过大，所以会根据不同的选项，做不同的处理。下面会详细讲解

怎么合并

权重

1、组件选项

2、组件 - mixin

3、组件 - mixin - mixin

4、…省略无数可能存在的嵌套 mixin

x、全局 选项

权重 从 1 到最后 依次减少

其实没有权重这个东西，但是结果是一样的，是我觉得这样好理解，加上的一个概念

下面的讲解，会使用 四种选项代号 作为例子

　　mixin 里面嵌套mixin 太深 很少见，而且也 难以维护，所以就只嵌套一层为例

1、组件选项：代号为 A

2、组件-mixin：代号为 B

3、组件-mixin-mixin ：代号为 C

4、全局选项 ：代号为 D

1、函数合并叠加

包括选项：data，provide

把两个函数合并加到一个新函数中，并返回这个函数。在函数里面，会执行 那两个方法。

按照这个流程，使用代号

1
2
3
4
5
6
7
1、D 和 C 合并成一个函数 (CD)，函数执行时，会执行 C ，再执行 D

2、(CD) 和 B 合并成 一个函数 (B(CD))，函数执行时，会执行 B ，再执行 (CD)

3、(B(CD)) 和 A 合并成一个函数，函数执行时，会执行 B ，再执行 (B(CD))

有点绕，简化执行流程是： A->B->C->D

　　data 中数据有重复的，权重大的优先，比如下面

1
2
3
4
5
6
7
8
9
10
11
12
var test_mixins={
    data(){        
        return {name:34}
    }
}

var a=new Vue({    
    mixins:[test_mixins],
    data(){        
        return {name:12}
    }
})

　　可以看到，mixin 和 组件本身 的 data 都有 name 这个数据，很显然会以组件本身的为主，因为组件本身权重大

2、数组叠加

生命周期函数

权重越大的越放后面，会合并成一个数组，比如created

[
全局 mixin - created，
组件 mixin-mixin - created，
组件 mixin - created，
组件 options - created
]

执行流程是

全局mixin-created -> 组件mixin-mixin-created -> 组件mixin-created -> 组件options-created

生命周期，权重小的 先执行

watch
合并成一个下面这样的数组，权重越大的越放后面

1
2
3
4
5
6
[ 
    全局 mixin - watch，
    组件 mixin-mixin - watch，
    组件 mixin - watch，
    组件 options - watch 
]

执行流程是

全局mixin-watch ->组件mixin-mixin-watch -> 组件mixin-watch -> 组件options-watch

监听回调，权重小的 先执行

3、原型叠加

包括选项：components，filters，directives

两个对象合并的时候，不会相互覆盖，而是 权重小的 被放到 权重大 的 的原型上

这样权重大的，访问快些，因为作用域链短了

1
2
3
A.__proto__ = B  
B.__proto__ = C  
C.__proto__ = D

两个对象合并的时候，不会

以 filter 为例，下面是四种 filter 合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 全局 filter
Vue.filter("global_filter",function (params) {})

// mixin 的 mixin
var mixin_mixin={    
    filters:{
        mixin_mixin_filter(){}
    }
}

// mixin filter
var test_mixins={    
    filters:{
        mixin_filter(){}
    }
}

// 组件 filter
var a=new Vue({    
    mixins:[test_mixins],    
    filters:{
        self_filter(){}
    }
})

结果就系这样…

4、覆盖叠加
包括选项：props，methods，computed，inject

两个对象合并，如果有重复key，权重大的覆盖权重小的

比如
　　组件的 props：{ name:""}
　　组件mixin 的 props：{ name:"", age: “” }
那么 把两个对象合并，有相同属性，以 权重大的为主，组件的 name 会替换 mixin 的name

5、直接替换
　　这是默认的处理方式，当选项不属于上面的处理方式的时候，就会像这样处理，包含选项：el，template，propData 等
　　两个数据只替换，不合并，权重大的，会一直替换 权重小的，因为这些属于只允许存在一个，所有只使用权重大的选项
　　组件 设置 template，mixin 也设置 template，不用怕，组件的肯定优先
　　这个好像跟 覆盖叠加 很像，其实不一样，覆盖叠加会把两个数据合并，重复的才覆盖。而这个不会合并，直接替换掉整个选项

使用